<template>
	<view class="container" :style="{'height':contentHeight}">
		<image class="main-img" src="/static/clock/3.png" mode=""></image>
		<view class="">
			<span>刷脸检测身份</span>
			<span v-if="userIdentityStatus===2||(userIdentityStatus===1&&userExemptFlag===0)">请整理仪表，穿着工装</span>
			<span v-if="userIdentityStatus===1&&userExemptFlag===1">工装检测豁免期</span>
		</view>
		<view class="">
			<span v-if="userIdentityStatus===0" style="color: #515151;">试用零工，</span>
			<span v-if="userIdentityStatus===1">正式零工，</span>
			<span v-if="userIdentityStatus===2">金牌零工，</span>
			<span>您好!</span>
		</view>
		<view v-if="[0,2].includes(userIdentityStatus)" style="color: #A5A5A5;"> 为保障用工安全，平台将识别身份，确保是本人参与工作 </view>
		<view class="" v-if="userIdentityStatus==1&&userExemptFlag===0"> 豁免期已结束，请在工作时穿着工装，维护良好工作环境 </view>
		<view class="" v-if="userIdentityStatus==1&&userExemptFlag===1"> 工装购买后，将开启{{day}}天豁免期，可免于未穿着工装处罚 </view>
		<view class="imgs">
			<view class="item">
				<image src="/static/clock/4.png" mode=""></image>
				<view class=""> 不要歪头 </view>
				<image class="close" src="/static/clock/2.png" mode=""></image>
			</view>
			<view class="item">
				<image src="/static/clock/5.png" mode=""></image>
				<view class=""> 光线不足 </view>
				<image class="close" src="/static/clock/2.png" mode=""></image>
			</view>
			<view class="item">
				<image src="/static/clock/6.png" mode=""></image>
				<view class=""> 人脸模糊 </view>
				<image class="close" src="/static/clock/2.png" mode=""></image>
			</view>
		</view>
		<view class="btn" @click="toFace()"> 开始检测 </view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				contentHeight: '',
				userIdentityStatus: '', // 0 试用零工 1 正式零工 2 金牌零工
				userExemptFlag: '', // 是否打卡豁免期 0 不是  1 是
				day: '',
				uploadToken: ''
			};
		},
		methods: {
			onNavigationBarButtonTap() {
				uni.navigateTo({
					url: '/pages/clock/rule'
				})
			},
			async get_user_by_token() {
				let res = await this.$fetch(this.$api.get_user_by_token, {}, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.userIdentityStatus = res.data.userIdentityStatus
				this.userExemptFlag = res.data.userExemptFlag
				console.log(this.userExemptFlag)
			},
			async getDay() {
				let res = await this.$fetch(this.$api.property_list_by_type_and_key, {
					type: 1,
					key: 'user_exempt_date'
				}, 'POST')
				if (res.code != 0) {
					return
				}
				this.day = res.data
			},
			toFace() {
				uni.navigateTo({
					url: '/pages/clock/face/face?isClock=true'
					// url: '/pages/camera/idphoto/idphoto'
				})
			},
			updateUserImage(e) {
				console.log(e, "eeeeeeeeeeeeeeee");
				this.uploadImgs(e)
			},
			// 上传图片至七牛
			uploadImgs(urls) {
				let _this = this
				let date = new Date()
				let year = String(date.getFullYear()) //获取完整的年份(4位)
				let month = String(date.getMonth() + 1) //获取当前月份(0-11,0代表1月)
				let strDate = String(date.getDate()) // 获取当前日(1-31)
				if (date.getMonth() + 1 < 10) {
					month = `0${month}`
				} // 如果月份是个位数，在前面补0
				if (date.getDate() < 10) {
					strDate = `0${strDate}`
				} // 如果日是个位数，在前面补0
				let time = year + month + strDate
				console.log(time, year, 'vbkdflnb')
				let ext = urls.split(".").pop()
				// console.log(urls.split(".").pop())
				// let ext = urls.substring((urls.length-26),urls.length)
				uni.uploadFile({
					url: this.$api.uploadPic,
					name: 'file',
					filePath: urls,
					formData: {
						token: this.uploadToken,
						key: 'task/user/faceClock/' + time + '/' + this.$u.guid() + "." + ext
					},
					success: ({
						data
					}) => {
						data = JSON.parse(data)
						// _this.userObj.avatar = data.hash
						// _this.userInfo.user.avatarto = data.hash
						console.log('data1110', data)
					}
				})
			},
			// 获取七牛上传TOKEN
			async get_qiniu_token() {
				let res = await this.$fetch(this.$api.get_qiniu_token, {}, 'POST')
				this.uploadToken = res.msg
			},
		},
		onLoad() {
			this.contentHeight = uni.getWindowInfo().windowHeight + "px"
			this.get_qiniu_token()
			this.get_user_by_token()
			this.getDay()
		}
	}
</script>
<style lang="less" scoped>
	.container {
		background-color: #fff;
		overflow: hidden;

		.main-img {
			display: block;
			width: 440rpx;
			height: 440rpx;
			margin: 120rpx auto 40rpx auto;
		}

		view:nth-child(2) {
			margin: 0 auto 60rpx auto;
			text-align: center;

			span:nth-child(1) {
				display: block;
				font-size: 40rpx;
				font-weight: bold;
			}

			span:nth-child(2) {
				display: block;
				font-size: 32rpx;
				margin-top: 10rpx;
			}
		}

		view:nth-child(3) {
			margin: 0 auto 20rpx auto;
			font-size: 32rpx;
			text-align: center;

			span:nth-child(1) {
				color: #FF8000;
				font-weight: bold;
			}
		}

		view:nth-child(4) {
			margin: 0 auto 48rpx auto;
			text-align: center;
			color: #A5A5A5;
			font-size: 28rpx;
		}

		.imgs {
			width: 100%;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			font-size: 32rpx;

			.item {
				margin: auto;
				width: 128rpx;
				text-align: center;

				image:nth-child(1) {
					width: 128rpx;
					height: 128rpx;
					margin-bottom: 18rpx;
				}

				view {
					margin-bottom: 18rpx;
				}

				.close {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.btn {
			position: absolute;
			left: 32rpx;
			bottom: 10rpx;
			width: 686rpx;
			height: 88rpx;
			color: #333333;
			font-size: 32rpx;
			text-align: center;
			line-height: 88rpx;
			font-weight: bold;
			border-radius: 12rpx;
			background-color: #FCC928;
			box-shadow: 0 6rpx 12rpx 2rpx #FCC928;
		}
	}
</style>
